<template>
	<div>
		<div class="recommend-title">热门推荐</div>
		<ul>
			<router-link tag="li" :to="'/detail/'+item.id" class='item border-bottom' v-for='item of recommendList' :key="item.id">
				<img :src="item.imgUrl" alt="" class="item-img">
				<div class="item-info">
					<p class="item-title">{{item.title}}</p>
					<p class="item-desc">{{item.desc}}</p>
					<button class="item-btn">查看详情</button>
				</div>
			</router-link>
		</ul>
	</div>

</template>
<script>
export default {
  name: 'Weekend',
  props: {
    recommendList: Array
  },
  data () {
    return {

    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/mixins.styl'
.recommend-title
	margin-top 0.2rem
	line-height 0.8rem
	background #eee
	text-indent 0.2rem
.item
	display flex
	height 1.9rem
	overflow hidden
	.item-img
		width 1.7rem
		height 1 0.7rem
		padding 0.1rem
	.item-info
		flex 1
		padding 0.1rem
		min-width 0
		.item-title
			height 0.54rem
			line-height 0.54rem
			font-size 0.32rem
			overflow hidden
			ellipsis()
		.item-desc
			height 0.4rem
			line-height 0.4rem
			color #ccc
			font-size 0.28rem
			ellipsis()
		.item-btn
			line-height 0.44rem
			margin-top 0.16rem
			background #ff9300
			padding 0 0.2rem
			border-radius 0.06rem
			color #fff
</style>
